<template>
	<el-container v-loading="loading">
		<el-header class="Home-header">
			<el-row type="flex" justify="end" style="height: 100%;" >
				<el-col :span="1" :xs="4" style="display: flex;align-items: center;">
					<el-avatar :size="40" :src="circleUrl"></el-avatar>
				</el-col>
				<el-col :span="5" :xs="12">
					<el-dropdown @command="toNode" style="height: 100%;">
						<span class="el-dropdown-link" style="display: flex;height: 100%;align-items: center;">
							超级管理员:admin<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command='RePassword' icon="el-icon-circle-plus">忘记密码</el-dropdown-item>
							<el-dropdown-item command='toNode'  icon="el-icon-circle-check">退出</el-dropdown-item>
						</el-dropdown-menu>
				 </el-dropdown>
				</el-col>
			</el-row>
		</el-header>

		<el-container class="Home-container2">
			<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
				:collapse="isCollapse">
				<el-submenu v-for="(Aside,index) in AsideNavigation" :key='index' :index="Aside.index">
					<template slot="title">
						<i :class="Aside.icon"></i>
						<span slot="title">{{Aside.text}}</span>
					</template>
					<el-menu-item-group v-for="(AsideS,indexS) in Aside.list" :key='indexS'>
						<!-- <span slot="title">分组一</span> -->
						<el-menu-item @click="AsidesClick(AsideS.path)" :index="AsideS.index">{{AsideS.text}}
						</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>

			<!-- <el-aside class="colour-red Home-aside">
				
			</el-aside> -->
			<el-container class="Home-container3">
				<el-main>
					<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
						<el-radio-button :label="false">展开</el-radio-button>
						<el-radio-button :label="true">收起</el-radio-button>
					</el-radio-group>
					<el-divider class="Home-el-divider"></el-divider>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</el-container>

</template>

<script>
	var that
	export default {
		data() {
			return {
				loading:true,
				circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
				isCollapse: true,
				// 路由菜单
				AsideNavigation: [{
						index: '1',
						text: '权限管理',
						icon: 'el-icon-s-tools',
						list: [
							{
								index: '1-1',
								text: '权限设置',
								path: '/home/manage',
							},
							{
								index: '1-2',
								text: '班级设置',
								path: '/home/manage',
							},
							{
								index: '1-3',
								text: '课程设置',
								path: '/home/manage',
							},
							{
								index: '1-4',
								text: '老师分配',
								path: '/home/manage',
							},
						]
					},
					{
						index: '2',
						text: '学生中心',
						icon: 'el-icon-user-solid',
						list: [{
							index: '2-1',
							text: '成绩查询',
							path: '/home/grade',
						}]
					},
					{
						index: '3',
						text: '教师中心',
						icon: 'el-icon-s-platform',
						list: [{
							index: '2-1',
							text: '成绩查询',
							path: '/home/grade',
						}]
					},
				]
			}
		},
		watch:{
			loading(res,re){
				console.log(res,re);
			}
		},
		mounted() {
			that = this
			that.loading = that.$vuex.state.loading
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			AsidesClick(item) {
				if (this.$route.path != item) {
					this.$router.push(item)
				}
			},
			// 导航选择器
			toNode(res){
				switch(res){
					// 返回登录页
					case 'toNode':
					localStorage.removeItem('token')
					localStorage.removeItem('ManbePassword')
					this.$router.push('/')
					break
					case 'RePassword':
					break
				}
			}
		}
	};
</script>


<style scoped lang="scss">
	.Home-header {
		background: rgba(255, 255, 255, 1.0);
		box-shadow: 0 0px 6px 4px #c7c7c7;
		position: relative;
		z-index: 2000;
	}

	.Home-container2 {
		.Home-aside {
			height: calc(100vh - 60px);
		}

		.el-menu-vertical-demo:not(.el-menu--collapse) {
			width: 200px;
			min-height: 400px;
		}

		.Home-container3 {
			height: calc(100vh - 60px);

			.Home-el-divider {
				margin: 0px;
				margin-bottom: 10px;
			}
		}
	}
</style>
